<template>
	<view class="ygregister">
		<view class="add_info">本院实行实名制就诊,请如实填写就诊人信息,如因信息错误产生的一切后果自行负责.</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">姓名</view>
			<view class="ygregister_box">
				<input class="input_ygregister" placeholder="请输入您的真实姓名" maxlength="8" @input="Onname"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">身份证</view>
			<view class="ygregister_box">
				<input class="input_ygregister" placeholder="请输入您的身份证号码" maxlength="18" @input="Onidcard"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">手机号码</view>
			<view class="mobile_box">
				<input class="input_mobile" placeholder="请输入您的手机号" maxlength="11" type="number" @input="Onmobile"
					placeholder-class="placeholderClass" />
				<view :class="verdisabled?'verification_a':'verification_b'" class="verifica" @click='Onverification'>
					{{captchastring}}
				</view>
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">验证码</view>
			<view class="ygregister_box">
				<input class="input_ygregister" placeholder="请输入验证码" maxlength="6" type="number" @input="Oncode"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="ygregister_bos flex-row-start">
			<view class="ygregister_title">默认</view>
			<switch color="#6ccbb6" style="transform: scale(.8,.8)" :checked="objdata.isdefault==1?true:false"
				@change="Ondefault" />
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">人员类型</view>
			<view class="ygregister_box">
				<radio-group @change="radioChange">
					<label class="radio margin-20">
						<radio color="#6ccbb6" value="1" :checked="objdata.type==1" />成人
					</label>
					<label class="radio">
						<radio color="#6ccbb6" value="2" :checked="objdata.type==2" />儿童
					</label>
				</radio-group>
			</view>
		</view><view class="ygregister_bos">
			<view class="ygregister_title">性别</view>
			<view class="ygregister_box">
				<radio-group @change="sexChange">
					<label class="radio margin-20">
						<radio color="#6ccbb6" value="1" :checked="objdata.sex==1" />男
					</label>
					<label class="radio">
						<radio color="#6ccbb6" value="2" :checked="objdata.sex==2" />女
					</label>
				</radio-group>
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">家庭地址</view>
			<view class="mobile_box">
				<input class="input_ygregister" placeholder="请输入您的家庭地址" maxlength="50" @input="Onaddr"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="add_infois font-9c9c9d">我们将根据您的个人真实信息,为您分配新的诊疗卡.为方便您的就诊,请如实填写您的个人信息.</view>
		<!-- 注册按钮 -->
		<button class="custom_class" @click='Onregister' :loading="loading">立 即 绑 定
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchastring: '获取验证码',
				verdisabled: true, //验证码判断
				loading: false, //加载
				//提交的数据
				objdata: {
					name: '',
					sex: 1,
					type: 1,
					isdefault: 1,
					mobile: '',
					id_card: '',
					addr: '',
					code: ''
				},
			}
		},
		onLoad(options) {
			this.$Http({
				url: 'listThePatient',
				data: {}
			}).then(res => {
				if(res.code == 1){
					this.objdata.isdefault = 1
					res.data.forEach(item => {
						if (item.isdefault == 1) {
							this.objdata.isdefault = 0
						}
					})
				}
			})
		},
		methods: {
			//姓名
			Onname(e) {
				this.objdata.name = e.detail.value
			},
			//手机号码
			Onmobile(e) {
				this.objdata.mobile = e.detail.value
			},
			//身份证
			Onidcard(e) {
				this.objdata.id_card = e.detail.value
				
				if (this.$u.test.idCard(this.objdata.id_card)) {
					if(this.$base.isChildren(this.objdata.id_card)){
						this.objdata.type = 2
					}else{
						this.objdata.type = 1
					}
				}
			},
			//验证码
			Oncode(e) {
				this.objdata.code = e.detail.value
			},
			//地址
			Onaddr(e) {
				this.objdata.addr = e.detail.value
			},
			//人员类型
			radioChange(e) {
				this.objdata.type = e.detail.value
			},
			//人员类型
			sexChange(e) {
				this.objdata.sex = e.detail.value
			},
			//默认
			Ondefault(e) {
				this.objdata.isdefault = e.detail.value == true ? 1 : 0
			},
			//验证码倒计时
			Onverification: function() {
				var that = this;
				if (that.objdata.mobile == '') {
					wx.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!(/^1[34578]\d{9}$/.test(that.objdata.mobile)) || that.objdata.mobile.length != 11) {
					wx.showToast({
						title: '手机号码格式错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.verdisabled) {
					return
				}
				var currentTime = 60;
				var interval = null;
				let basedata = {
					mobile: that.objdata.mobile
				}
				this.$Http({
					url: 'sendSms',
					data: basedata,
					show: true,
					type: 'POST',
				}).then(res1 => {
					if (res1.code == 1) {
						that.verdisabled = false
						interval = setInterval(function() {
							currentTime--;
							that.captchastring = currentTime + '秒'
							if (currentTime <= 0) {
								clearInterval(interval)
								that.captchastring = '重新发送'
								that.verdisabled = true
							}
						}, 1000)
					}
				});
			},
			//提交
			Onregister() {
				// if (!this.$base.checkCard(this.objdata.id_card)) {
				if (!this.$u.test.idCard(this.objdata.id_card)) {
					wx.showToast({
						title: '身份证错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.$base.checkMobile(this.objdata.mobile)) {
					wx.showToast({
						title: '手机号错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.objdata.name == '') {
					wx.showToast({
						title: '就诊人姓名不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.objdata.code == '') {
					wx.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.objdata.addr == '') {
					wx.showToast({
						title: '地址不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.loading = true
				let data = this.objdata
				let idCard = this.objdata.id_card.toString()
				//算性别
				// if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
				// 	data.sex = 1; //男
				// } else {
				// 	data.sex = 2;
				// }
				//算生日
				if (idCard.length == 15) {
					data.birthday = "19" + idCard.slice(6, 12);
					// data.birthday = "19" + idCard.slice(6, 8).toString() + '-' + idCard.slice(9, 10).toString() + '-' + idCard.slice(11, 12).toString();
				} else if (idCard.length == 18) {
					data.birthday = idCard.slice(6, 14);
					// data.birthday = idCard.slice(6, 10).toString() + '-' + idCard.slice(11, 12).toString() + '-' + idCard.slice(13, 14).toString();
				}
				data.birthday = data.birthday.replace(/(.{4})(.{2})/, "$1-$2-");
				if(!this.$u.test.date(data.birthday)){
					wx.showToast({
						title: '身份证号年月日有误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$Http({
					url: 'addThePatient',
					data: data,
					show: true,
					type: 'POST'
				}).then(res => {
					this.loading = false
					if (res.code == 1) {
						uni.navigateBack({})
						// if (this.$store.state.jzkurl == '/pages/my/index') {
						// 	uni.switchTab({
						// 		url: '/pages/my/index',
						// 	})
						// } else {
						// 	let that = this
						// 	uni.redirectTo({
						// 		url: that.$store.state.jzkurl,
						// 	})
						// }
					}
				});
			}
		}
	}
</script>

<style>
	.ygregister {
		padding-top: 10rpx;
		height: 100%;
		background-color: #f9f9f9;
	}

	.ygregister_bos {
		width: 680rpx;
		height: 100rpx;
		margin-left: 35rpx;
		display: flex;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.add_info {
		color: #efb56e;
		background-color: #fef5ee;
		padding: 20rpx 25rpx;
		font-size: 24rpx;
	}

	.add_infois {
		padding: 20rpx 25rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	/* 标题 */
	.ygregister_title {
		width: 160rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #323232;
		font-weight: 700;
	}

	/* 中间 */
	.ygregister_box {
		width: 476rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ygregister_boxa {
		width: 476rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.margin-20 {
		margin-right: 20rpx;
	}

	.placeholderClass {
		color: #c8c8c8;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.input_ygregister {
		width: 476rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #323232;
	}

	/* 验证码 */
	.mobile_box {
		width: 520rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.verifica {
		height: 56rpx;
		border-radius: 28rpx;
		/*  */

		/* padding:0 18rpx; */
		font-size: 26rpx;
		color: #ffffff;
		width: 180rpx;
		line-height: 56rpx;
		text-align: center;
	}

	.verification_a {
		background-color: #6ccbb6;
	}

	.verification_b {
		background-color: #99e2d2;
	}

	.input_mobile {
		width: 280rpx;
		height: 100rpx;
		color: #323232;
	}





	/* 下拉 */
	.ygregister_image {
		width: 44rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.ygregister_image image {
		width: 20rpx;
		height: 10rpx;
	}




	/* 注册按钮 */
	.custom_class {
		width: 650rpx;
		height: 85rpx;
		border-radius: 5rpx;
		background-color: #6ccbb6 !important;
		color: #ffffff !important;
		font-size: 32rpx !important;
		margin-top: 180rpx;
		margin-left: 50rpx;
		text-align: center;
		line-height: 85rpx;
	}

	.custom_class:active {
		background-color: #57d6bb !important;
	}
</style>
